<template>
  <div>
    <van-nav-bar left-arrow title="个人主页">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="backHandle" />
      </template>
      <template #right>
        <van-icon name="share-o" size="18" @click="showShare = true" />
      </template>
    </van-nav-bar>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <img :src="this.user.img" alt="wu" width="75" /><br />
    {{ this.user.username }}
    <div class="myDy">
      <label for="" class="modulename">我的动态</label>
      <br />
      <div class="box" v-for="item in dys" :key="item">
        <label for="">{{
          $moment(parseInt(item.create_time)).format("YYYY-MM-DD HH:mm")
        }}</label
        ><br />
        <van-divider />
        <label for="">{{ item.content }}</label>
      </div>
    </div>
    <van-divider />
    <div class="myMovieComment">
      <label for="" class="modulename">我的影评</label>
      <div class="box" v-for="item in myComment" :key="item">
        <div>
          {{ $moment(parseInt(item.create_time)).format("YYYY-MM-DD HH:mm") }}
        </div>
        <div>{{ item.content }}</div>
      </div>
    </div>
    <van-divider />
    <div class="myCollection">
      <label for="" class="modulename">我的收藏</label>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
        ],
      ],
      user: {
        img: "",
        username: "",
      },
      dys: [],
      myComment: [],
    };
  },
  created() {
    this.loadInfo();
    this.loadDy();
    this.loadMyComment();
  },
  methods: {
    backHandle() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    loadInfo() {
      axios
        .get(
          `http://localhost:8888/user/info?username=${this.$route.params.username}`
        )
        .then((res) => {
          this.user.img = res.data[0].user_face;
          this.user.username = res.data[0].user_name;
        });
    },
    loadDy() {
      axios
        .get(
          `http://localhost:8888/user/published?username=${this.$route.params.username}`
        )
        .then((res) => {
          console.log(res);
          this.dys = res.data;
        });
    },
    loadMyComment() {
      axios
        .get(
          `http://localhost:8888/movie/myComment?username=${sessionStorage.getItem(
            "username"
          )}`
        )
        .then((res) => {
          console.log(res);
          this.myComment = res.data;
        });
    },
  },
};
</script>

<style>
.myDy,
.myMovieComment,
.myCollection {
  font-size: 13px;
  /* box-shadow: 2px 2px 5px #9e9b9b; */
  margin-top: 10px;
  padding-top: 10px;
}
.box {
  width: 40%;
  /* height:100px; */
  display: inline-block;
  /* border:1px solid #333; */
  background-color: #fff;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 2px 2px 5px #b3afaf;
  padding-top: 10px;
  padding-bottom: 10px;
}
.modulename {
  background-color: #fff;
  /* content: 30px; */
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 15px;
}
</style>
